<template>
    <el-card shadow='never' style='max-height: 70vh; overflow: auto'>
        <el-form ref='form' :model='form' :rules='rules' label-width='120px' :disabled='disabled'>
            <el-form-item label='id:' prop='id' v-show='false'>
                <el-input v-model='form.id' disabled />
            </el-form-item>
            <el-form-item label='直播封面:' prop='roomImage'>
                <ImageUpload v-model='form.roomImage' />
            </el-form-item>
            <el-row>
                <el-col :span='12'>
                    <el-form-item label='作者:' prop='roomUserId'>
                        <SelectPage v-model='form.roomUserId' :url="'/admin/user/selectPage'"
                                    show_field='nickname' show_id='uid' query_field='uid' :multiple='false' />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='房间名称:' prop='roomName'>
                        <el-input v-model='form.roomName' placeholder='请输入房间名称' clearable />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='选择分类:' prop='category1'>
                        <SelectCategory url='/admin/sq.category/tree' ref='category' :queryParams='{type: 1 }'
                                        :check-strictly='true'
                                        :value='[form.category1, form.category2, form.category3]'
                                        @change='onChangeCategory'></SelectCategory>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='房间类型:' prop='roomType'>
                        <el-select v-model='form.roomType' placeholder='请选择房间类型' clearable>
                            <el-option v-for='(item, index) in roomType' :key='index' :label='item.label'
                                       :value='item.value' />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='付费价格:' prop='roomMoney' v-if='form.roomType === 2'>
                        <el-input-number v-model='form.roomMoney' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='房间密码:' prop='roomPassword' v-if='form.roomType === 3'>
                        <el-input v-model='form.roomPassword' placeholder='请输入房间密码' clearable />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='预约开播时间:' prop='appointment_start_time'>
                        <el-date-picker v-model="form.appointment_start_time"
                                        type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="请选择预约开播时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='回放时间:' prop='transcribe_day'>
                        <el-input-number :min="0" v-model="form.transcribe_day" placeholder='请输入回放天数'/>
                        <div class="tip-info">0为直播回放，永久有效</div>
                    </el-form-item>
                </el-col>
                <el-col :span='24'>
                    <el-form-item label='房间状态:' prop='roomType'>
                        <el-radio-group v-model='form.roomStatus'>
                            <el-radio :label='item.value'
                                      :disabled='Number(item.value) !== 1 && Number(item.value) !== 4 && Number(item.value) !== 5'
                                      v-for='(item, index) in roomStatus'
                                      :key='index'>{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span='24'>
                    <el-form-item label='用户阶段:' prop='event_type'>
                        <el-radio-group v-model='form.event_type'>
                            <el-radio :label='item.value'
                                      v-for='(item, index) in event_type'
                                      :key='index'>{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label='创建时间:' prop='createTime' v-if='disabled'>
                <el-date-picker v-model='form.createTime' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
                                placeholder='选择创建时间' />
            </el-form-item>
            <el-form-item label='更新时间:' prop='updateTime' v-if='disabled'>
                <el-date-picker v-model='form.updateTime' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
                                placeholder='选择更新时间' />
            </el-form-item>
            <el-form-item label='关播时间:' prop='endTime' v-if='form.roomStatus === 3'>
                <el-date-picker v-model='form.endTime' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
                                placeholder='选择关播时间' />
            </el-form-item>
            <el-form-item label='失败原因:' prop='fail_content' v-if='form.roomStatus === 5'>
                <el-input
                    type='textarea'
                    :rows='2'
                    placeholder='请输入失败原因'
                    v-model='form.fail_content'>
                </el-input>
            </el-form-item>
            <el-form-item label='绑定培训:' v-if='topicList.length>0'>
                <div style='display: flex'>
                    <div style='width: 130px;border:1px solid #efefef;padding:3px;border-radius: 5px;overflow: hidden;margin-right: 5px' v-for='item in topicList'>
                        <el-image :src='item.cover' style='height: 120px;width: 120px'></el-image>
                        <div><span>{{item.title}}</span></div>
                        <div style='font-size: 12px'>价格:<span>{{item.price}}</span></div>
                    </div>
                </div>
            </el-form-item>
            <el-row>
                <el-col :span='12'>
                    <el-form-item label='用户数:' prop='userCount' v-if='disabled'>
                        <el-input-number v-model='form.userCount' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='在线数:' prop='onlineCount' v-if='disabled'>
                        <el-input-number v-model='form.onlineCount' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='点赞用户数:' prop='zanUserCount' v-if='disabled'>
                        <el-input-number v-model='form.zanUserCount' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='点赞次数:' prop='zanCount' v-if='disabled'>
                        <el-input-number v-model='form.zanCount' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='点赞积分:' prop='zanScore' v-if='disabled'>
                        <el-input-number v-model='form.zanScore' :step='1' :min='0'></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type='primary' @click='submitForm'>确认</el-button>
                <el-button type='warning' @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCategory from '@/components/My/SelectCategory'
import { listBindTopic } from '@/api/liveBindTopic'

export default {
    name: 'EditForm',
    components: { SelectCategory },
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            topicList:[],
            // 编辑表单验证规则
            rules: {
                roomUserId: [{ required: true, message: '请输入作者', trigger: 'blur' }],
                roomImage: [{ required: true, message: '请上传直播封面', trigger: 'blur' }],
                roomName: [{ required: true, message: '请输入房间名称', trigger: 'blur' }],
                roomType: [{ required: true, message: '请选择房间类型', trigger: 'blur' }],
                roomMoney: [{ required: true, message: '请输入付费价格', trigger: 'blur' }],
                roomPassword: [{ required: true, message: '请输入房间密码', trigger: 'blur' }],
                appointment_start_time: [{ required: true, message: '请选择预约直播时间', trigger: 'blur' }],
                roomStatus: [{ required: true, message: '请选择房间状态', trigger: 'blur' }],
                category1: [{ required: true, message: '请选择所属分类', trigger: 'blur' }],
                fail_content: [{ required: true, message: '请输入失败原因', trigger: 'blur' }],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            roomType: [
                { label: '免费', value: 1 },
                { label: '付费', value: 2 },
                { label: '加密', value: 3 },
            ],
            roomStatus: [
                { label: '待审核', value: 1 },
                { label: '开播中', value: 2 },
                { label: '已下播', value: 3 },
                { label: '待开播', value: 4 },
                { label: '审核失败', value: 5 },
            ],
            event_type: [
                { label: '记经期', value: 1 },
                { label: '备孕中', value: 2 },
                { label: '已怀孕', value: 3 },
                { label: '已出生', value: 4 },
            ],
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                console.log(nval)
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                        // this.getBindTopicList({id:this.form.id})
                    })
                } else {
                    this.$set(this, 'form', {})
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        getBindTopicList(params){
            listBindTopic(params).then(res=>{
                if (res.data.length>0){
                    this.topicList=res.data
                }
            })
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeCategory(e, pathLabels) {
            e = e || []
            pathLabels = pathLabels || []
            this.$set(this.form, 'category3', e.length >= 3 ? e[2] : '')
            this.$set(this.form, 'category2', e.length >= 2 ? e[1] : '')
            this.$set(this.form, 'category1', e.length >= 1 ? e[0] : '')
            this.$set(this.form, 'category3_text', pathLabels.length >= 3 ? pathLabels[2] : '')
            this.$set(this.form, 'category2_text', pathLabels.length >= 2 ? pathLabels[1] : '')
            this.$set(this.form, 'category1_text', pathLabels.length >= 1 ? pathLabels[0] : '')
        },
    },
}
</script>
